{% load static %}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>华中科技大学图书馆</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
        type="text/css">
    <link rel="stylesheet" href="{% static 'css/theme.css' %}" type="text/css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.js"></script>

    <style>
        .dropdown-item:hover {
            background-color: transparent;
        }

        a:hover,
        a:focus {
            text-decoration: none;
        }

        .nav-tabs {
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }

        .nav-tabs .nav-link.active,
        .nav-tabs .nav-item.show .nav-link {
            color: #495057;
            background-color: transparent;
            border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(236, 236, 236, 1);
        }
    </style>
    {% if messages %}
    <script>
        {% for msg in messages %}
        alert('{{ msg.message }}');
        {% endfor %}
    </script>
    {% endif %}
</head>

<body style="background-color: rgba(0,0,0,0.1)">
    {% block lead %}

    <nav class="navbar navbar-expand-md navbar-dark bg-primary">
        <div class="container">
            <div class="collapse navbar-collapse" id="navbar18">
                <a class="navbar-brand d-none d-md-block" href="{% url 'index' %}">
                    <b> 华中科技大学图书馆</b>
                </a>
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'books' %}"> 图书信息</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'tickets' %}"> 罚单信息</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> 借阅信息 </a>
                        <div class="dropdown-menu bg-primary ">
                            <a class="dropdown-item text-light" href="{% url 'loans' %}">借书记录</a>
                            <a class="dropdown-item text-light" href="{% url 'loaned' %}">待还书籍</a>
                        </div>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle text-light" href="#" id="navbardrop" data-toggle="dropdown">
                            {% if request.user.is_authenticated %}
                            {{ request.user.username }} 您好
                            {% else %}
                            欢迎
                            {% endif %}
                        </a>
                        <div class="dropdown-menu bg-primary ">
                            {% if request.user.is_authenticated %}
                            <a class="dropdown-item text-light" href="{% url 'self_inf' %}">个人信息</a>
                            <a class="dropdown-item text-light" href="{% url 'logout' %}">登出</a>
                            {% else %}
                            <a class="dropdown-item text-light" href="{% url 'login' %}">登录</a>
                            {% endif %}

                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    {% endblock %}

    {% block content %}
    {% endblock %}

</body>

</html>